<template>
	<view>
		<uni-popup ref="popupsuccess" type="message">
			<uni-popup-message type="success" message="刷新成功" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popuperror" type="message">
			<uni-popup-message type="error" message="更新失败,请重试" :duration="2000"></uni-popup-message>
		</uni-popup>
		
		<view v-for="(item,index) in artList" :key="index">
			<ui-newsList :item='item' :newsTitle='item.title' :newsCreatTime='item.createtime'
				:newsCount='item.not_see_comment_num' :comment_num='item.comment_num'></ui-newsList>
		</view>
		
		<view class="more" v-if="showButtonLoading">
			<uni-load-more :status="more" :content-text="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				artList: [],
				more: 'loading',
				showButtonLoading: false,
				currentPage: 1, //当前页
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		computed: {
			...mapState(['userinfo']),
			...mapState(['notSeeCommentNum']),
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了')
			}
		},
		onShow() {
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showModal({
					content: '请先微信登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
                  url: '/pages/login/login?reffer=' + window.location.href
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							})
						}
					}
				});
		
				return
			}
			
			const that = this
			
			// 监听文章发送事件
			that.artList = []
			that.currentPage = 1
			that.getList();
			
			that.$api.getNotSeeCommentNum({
				user_id: that.userinfo.id
			}).then( result => {
				// 把登录信息赋值给 vuex 中的 notSeeCommentNum
				that.$store.dispatch('set_notseecommentnum', result)
				
				var count = that.notSeeCommentNum
				
				if(count > 99){
					count = '99+';
				}
				
				// uni.setTabBarBadge({
				// 	index: 3,
				// 	text: String(count)
				// })
			}).catch( err => {
				console.log(err)
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.getList(1);
		},
		// 上滑加载
		onReachBottom() {
			// this.more == moMore 时候表示已经加载完成,不需要再请求了
			if (this.more == 'moMore') {
				return;
			} else {
				this.getList(2);
			}
		},
		methods: {
			
			//获取数据
			// is_pulldownrefresh = 0 原始加载
			// is_pulldownrefresh = 1 下拉刷新数据
			// is_pulldownrefresh = 2 上拉加载数据
			getList(is_pulldownrefresh = 0, page = this.currentPage, num = 5) {
				if (is_pulldownrefresh === 0) {
					// 显示顶部加载
					// uni.showLoading()
				} else if (is_pulldownrefresh === 1) {
					uni.showLoading()
				} else if (is_pulldownrefresh === 2) {
					this.showButtonLoading = true
				}
				
				const _this = this
				this.$api.get_message({
					page: page,
					num: num,
					user_id: _this.userinfo.id
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length === 0) {
							//加载完成
							_this.more = 'moMore'
							_this.showButtonLoading = true
						} else if (res.data.length < num) {
							//如果本次加载的数量小于num说明已经获取完了
							_this.more = 'moMore'

						}

						_this.artList = _this.artList.concat(res.data)
						_this.currentPage = _this.currentPage + 1;

						if (is_pulldownrefresh === 1) {
							// is_pulldownrefresh = 1 下拉刷新数据
							setTimeout(() => {
								//停止加载
								uni.stopPullDownRefresh();

								//提示刷新成功
								_this.$refs.popupsuccess.open()

								//隐藏加载
								uni.hideLoading()

							}, 1000)
						} else if (is_pulldownrefresh == 2) {
							// is_pulldownrefresh = 2 上拉加载数据
							setTimeout(() => {
								//隐藏加载
								uni.hideLoading()

							}, 1000)
						} else {
							//隐藏加载
							uni.hideLoading()
						}

					} else {
						//提示刷新成功
						_this.$refs.popuperror.open()
						//隐藏加载
						uni.hideLoading()
					}



				}).catch(() => {

				})
			}
		},
		
	}
</script>

<style>

</style>
